<template>
	<view class="cont">
		<popup-active :visible.sync="showHonor" :popScreenList="popScreenList" @toPage="toPage"></popup-active>
		<view class="diary">
			<view class="chatContent" v-if="cardInfo">
				<view class="head-title">
					<view class="headImage"><image :src="cardInfo.avatar" mode="aspectFill" /></view>
					<view class="head-tra">
						<view class="chatList_title">
							<text>{{ cardInfo.nikeName || '' }}</text>
						</view>
						<view class="time">
							<text>{{ cardInfo.createTime | date1 }}</text>
							<text style="margin-left: 24rpx;">已坚持{{ cardInfo.clockCountDays }}天</text>
						</view>
					</view>
				</view>
				<view class="chatList">
					<view class="con_box">
						<view class="con_box_con">
							<view :class="{ con_box_con_item: !cardInfo.planClockStatus }">
								<text class="value" v-if="cardInfo.planClockContent">{{ cardInfo.planClockContent.replace(/\s*/g, '') }}</text>
							</view>
							<view class="totle">
								<text v-if="cardInfo.planClockContent.length > 35 && !cardInfo.planClockStatus" @click="showAll(cardInfo)">全文</text>
								<text v-else-if="cardInfo.planClockContent.length > 35 && cardInfo.planClockStatus" @click="showAll(cardInfo)">收起</text>
							</view>
							<view class="chatList_img">
								<view v-if="cardInfo.imgUrls.length === 1" style="width: 320rpx;margin-bottom: 22rpx;" @click="viewImages(cardInfo.imgUrls, i)">
									<auto-image :src="cardInfo.imgUrls[0]"></auto-image>
								</view>
								<image v-else @click="viewImages(cardInfo.imgUrls, i)" :src="itemImg" v-for="(itemImg, i) in cardInfo.imgUrls" :key="i" mode="aspectFill" />
							</view>
							<view class="handle">
								<view class="icon_list" style="margin-right: 110rpx;" @click="dianzan(cardInfo)">
									<view class="icon"><image :src="cardInfo.likeType == '1' ? clickZan : zan"></image></view>
									<!-- <view>赞</view> -->
									<view>{{ cardInfo.likeNum || 0 }}</view>
								</view>

								<view class="icon_list" style="margin-right: 110rpx;" @click="handle(cardInfo)">
									<view class="icon"><image :src="chart"></image></view>
									<view>{{ cardInfo.commentList.length ? cardInfo.commentList.length : 0 }}</view>
								</view>

								<view class="icon_list" @click="share(cardInfo.planClockId)">
									<view class="icon"><image :src="shareCard"></image></view>
									<view>分享</view>
								</view>
							</view>
							<view class="hf" v-if="deleteTag">
								<view class="explin" v-if="cardInfo.commentList.length">
									<view v-for="(_item, index) in cardInfo.commentList" :key="_item.planClockCommentId" class="fh_message">
										<view class="chatList" @click.stop="showMessage(_item, cardInfo, index)">
											<!-- <text v-if="_item.author" class="name">{{ _item.customerName || '' }}回复{{ _item.author }}：</text> -->
											<text class="name">{{ _item.customerName || '' }}：</text>
											<text class="content">{{ _item.commentContent || '' }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="btnCard"><button type="primary" @click="addCard()" class="clickCard">去打卡</button></view>

		<uni-popup ref="popup" type="center" class="wrap">
			<view class="chat">
				<view class="textarea">
					<textarea class="uni-textarea" v-model="reportDesc" placeholder="快来发表您的独到见解吧" placeholder-class="place-holder" maxlength="200"></textarea>
				</view>
				<view class="button_userkeeper_bottom"><button class="btn baseBtn" @click.stop="close()" :disabled="disabled">提交评论</button></view>
			</view>
			<text @click="closeW" class="wrap_close"></text>
		</uni-popup>
		<uni-popup-slient ref="slient" :endTime="endTime"></uni-popup-slient>
		<view v-if="showActionSheet" @touchmove.stop>
			<view class="mask" @click="showActionSheet = false"></view>
			<view class="actionsheet" :class="{ actionsheet_toggle: showActionSheet }">
				<view class="actionsheet__menu"><view class="actionsheet__cell" @click="deleteById(msgData)" style="color: rgb(102, 100, 93);">删除</view></view>
				<view class="actionsheet__action"><view class="actionsheet__cell" @click="showActionSheet = false" style="color: rgb(102, 100, 93);">取消</view></view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import http from '../common/request.js';
import bridgeApi from '../common/rayBridgeSDK.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue';
import uniFab from '@/components/uni-fab/uni-fab.vue';
import uniPopupSlient from '@/components/uni-popup/uni-popup-dialog-silent.vue';
import mixLoadMore from '@/components/mix-load-more/mix-load-more';
import popupActive from '@/components/popup-activity/popup-activity.vue';
import AutoImage from '../components/uni-image/uni-auto-image.vue';
import { getCommonShareInfo } from '@/common/utils.js';
export default {
	components: {
		uniIcons,
		uniList,
		uniListItem,
		uniPopup,
		uniSwiperDot,
		uniFab,
		mixLoadMore,
		uniPopupSlient,
		popupActive,
		AutoImage
	},
	data() {
		const info = uni.getSystemInfoSync();
		return {
			isIndate: '',
			showActionSheet: false,
			deleteTag: true,
			wrap: false,
			reportDesc: '',
			shareWrapper: false,
			messageTag: false,
			planTheme: '',
			planId: '',
			zan: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/card/zan.png',
			clickZan: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/card/fouceZan.png',
			chart: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/card/message.png',
			shareCard: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/card/share.png',
			support: false,
			planClockId: '',
			show: true,
			parentId: '',
			// 页面刷新
			list: [],
			pageNum: 1,
			msgData: [],
			parentData: [],
			disabled: false,
			endTime: '',
			popScreenList: [],
			showHonor: false,
			subScript: '',
			newList: [],
			customerName: '',
			plan: {},
			cardInfo: undefined
		};
	},
	onLoad(option) {
		this.planId = option.id;
		this.planClockId = option.planClockId;
	},
	mounted() {
		this.detail();
	},
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	computed: {
		...mapState({ userInfo: state => state.userInfo})
	},
	filters: {
		date1(value) {
			if (value) {
				let date = new Date().getDate();
				let day = value.split(' ')[0].split('-')[2];
				if (day - date == 0) {
					return '今天' + value.split(' ')[1];
				} else if (day - date == -1) {
					return '昨天' + value.split(' ')[1];
				} else {
					return value.replace(/-/g, '.');
				}
			} else {
				return '';
			}
		}
	},
	methods: {
		addCard() {
			uni.redirectTo({
				url: './takeCard?id=' + this.planId + '&planTheme=' + this.planTheme + '&from=share',
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		toPage(value) {
			http('/api/duiba/getNoLoginUrl?credits=0&redirect=' + value, { method: 'GET' }).then(result => {
				if (result.code == 200) {
					// #ifdef H5
					location.href = result.data;
					// #endif
					// #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '../home/web_view?url=' + encodeURIComponent(result.data),
						animationType: 'pop-in',
						animationDuration: 200
					});
					// #endif
				}
			});
		},
		viewImages(urls, index) {
			uni.previewImage({
				urls,
				current: index,
				indicator: true
			});
		},
		cancel() {
			this.showActionSheet = false;
		},
		showMessage(data, parentData, index) {
			if (parentData.userId == data.customerId) {
				this.msgData = data;
				this.subScript = index;
				this.parentData = parentData;
				this.showActionSheet = true;
			}
		},
		deleteById(data, list) {
			http('/api/sysThemePunchPlan/clockComment/' + data.planClockCommentId, { data: {}, method: 'DELETE' }).then(
				result => {
					if (result.code == '200') {
						this.showActionSheet = false;
						this.parentData.commentList.splice(this.subScript, 1);
					}
				},
				result => {
					this.showLoading = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		detail(tag) {
			http('/api/sysThemePunchPlan/clockInfo?planClockId='+ this.planClockId, { method: 'GET' }).then(
				result => {
					const plan = result.plan || {};
					if (result.code == '200') {
						this.planTheme = plan.planTheme;
						this.planId = plan.planId;
						this.isIndate = plan.isIndate;
						this.cardInfo = result.data || {};
					}
				},
				result => {
					this.showLoading = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		dianzan(item) {
			// likeType 1类型 1-点赞 2-取消点赞
			let { planClockId, likeType = 1 } = item;
			likeType = likeType == '1' ? '2' : '1';
			http('/api/sysThemePunchPlan/auligei', { data: { planClockId, likeType }, method: 'POST' }).then(
				result => {
					if (result.code == 200) {
						item.likeType = result.data.isNoThumbs;
						item.likeNum = result.data.count || 0;
						const list = result.popScreen || [];
						if (list.length > 0) {
							this.showHonor = true;
							this.popScreenList = list;
						}
					}
				},
				result => {
					this.showLoading = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		handle(item) {
			this.customerName = item.customerName;
			this.newList = [];
			http('/api/cusUserInfo/getUserStatus/' + this.userInfo.userId, { data: {}, method: 'GET' }).then(
				result => {
					if (result.code == '200') {
						//  0 正常 1 禁言 2 停用
						if (!result.data) {
							this.$refs.popup.open();
							this.reportDesc = '';
							this.shareWrapper = false;
							this.planClockId = item.planClockId;
							this.newList = item;
						} else {
							this.$refs.slient.open();
							this.endTime = result.forbiddenDate;
						}
					}
				},
				result => {
					this.showLoading = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		close() {
			if (!this.reportDesc.length) {
				uni.showToast({
					title: '请提交评论',
					icon: 'none'
				});
				return false;
			} else {
				this.disabled = true;
			}
			this.$refs.popup.close();
			http('/api/sysThemePunchPlan/clockComment', {
				data: { parentId: this.parentId, planClockId: this.planClockId, commentContent: this.reportDesc, clockPlanTheme: this.planTheme },
				method: 'POST'
			}).then(
				result => {
					if (result.code == '200') {
						this.messageTag = false;
						this.disabled = false;
						this.newList.commentList.push({
							planClockCommentId: result.msg,
							customerName: this.userInfo.nickName,
							customerId: this.userInfo.userId,
							author: this.userInfo.nickName,
							commentContent: this.reportDesc
						});
						const list = result.popScreen || [];
						if (list.length > 0) {
							this.showHonor = true;
							this.popScreenList = list;
						}
					}
				},
				result => {
					this.showLoading = false;
					this.disabled = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		share(planClockId) {
			uni.navigateTo({
				url: '/card/share?planId=' + this.planId + '&planClockId=' + planClockId,
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		closeW() {
			this.$refs.popup.close();
		},
		showAll(data) {
			data.planClockStatus = !data.planClockStatus;
		}
	}
};
</script>

<style lang="less" scoped>
.wrap_close {
	position: absolute;
	bottom: -108rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 70rpx;
	height: 70rpx;
	border: solid 2rpx #fff;
	border-radius: 50%;
	&::before {
		content: '';
		position: absolute;
		top: 33rpx;
		left: 19rpx;
		width: 30rpx;
		height: 4rpx;
		background-color: #fff;
		transform: rotate(45deg);
		border-radius: 4rpx;
	}
	&::after {
		content: '';
		position: absolute;
		top: 33rpx;
		left: 19rpx;
		width: 30rpx;
		height: 4rpx;
		background-color: #fff;
		transform: rotate(-45deg);
		border-radius: 4rpx;
	}
}
.uni-swiper__warp {
	width: 100% !important;
}
.left,
.right {
	width: 60rpx;
	height: 60rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.left {
	position: absolute;
	left: 24rpx;
	top: 166rpx;
}
.right {
	position: absolute;
	right: 24rpx;
	top: 166rpx;
}
.app {
	padding: 22rpx;
}
.cell {
	margin: 22rpx;
	position: relative;
	image {
		width: 40rpx;
		height: 40rpx;
	}
	.number {
		width: 30rpx;
		height: 30rpx;
		border-radius: 100%;
		background: #f39800;
		color: #fff;
		font-size: 20rpx;
		text-align: center;
		line-height: 30rpx;
		position: absolute;
		top: -10rpx;
		right: -16rpx;
	}
}
.test {
	width: 100rpx;
	height: 100rpx;
	background: #dddddd;
}
.cont {
	background: #f7f7f7;
	padding-bottom: 130rpx;
	.btnCard {
		position: fixed;
		bottom: 0;
		z-index: 1;
		left: 0;
		right: 0;
		background: #fff;
		padding: 24rpx 40rpx;
		uni-button {
			background: #facc6b;
			font-size: 30rpx;
			color: #66645d;
			font-weight: 200;
			border: none;
		}
		.clickCard {
			background: #facc6b;
			border: none;
			height: 82rpx;
			line-height: 82rpx;
			font-size: 30rpx;
			color: #66645d;
			font-weight: 400;
		}
	}
	.diary {
		margin: 24rpx 40rpx 0 40rpx;
		position: relative;
		.punch_card {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			color: #66645d;
			// border-bottom: 2rpx solid rgba(102, 100, 90, 0.1);
			height: 93rpx;
			position: relative;
			&:after {
				content: '';
				width: 100%;
				height: 2rpx;
				background: rgba(102, 100, 90, 0.1);
				position: absolute;
				left: 0;
				bottom: 0;
				transform: scaleY(0.5);
			}
		}
		.chatContent {
			margin-bottom: 24rpx;
			background: #fff;
			// display: flex;
			padding: 20rpx;
			border-radius: 12rpx;
			.head-title {
				display: flex;
				.headImage {
					width: 100rpx;
					height: 100rpx;
					border-radius: 100%;
					margin-right: 20rpx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 100%;
					}
				}
				.head-tra {
					padding-top: 10rpx;
					.chatList_title {
						color: #66645d;
						font-size: 30rpx;
						height: 42rpx;
						line-height: 42rpx;
						margin-bottom: 8rpx;
					}
					.time {
						font-size: 24rpx;
						color: rgba(102, 100, 93, 0.5);
						height: 33rpx;
						line-height: 33rpx;
					}
				}
			}
			.chatList {
				margin-left: 120rpx;
				.chatList_title {
					font-size: 30rpx;
					color: #66645d;
				}
				.name {
					color: #66645d;
					font-size: 28rpx;
					font-weight: 400;
				}
				.content {
					font-size: 28rpx;
					color: #8a8c8d;
					font-weight: 400;
				}
			}
			.con_box {
				.con_box_top {
					display: flex;
					justify-content: space-between;
					.time {
						color: #66645d;
						font-size: 24rpx;
						margin-top: 20rpx;
					}
				}
			}
			.con_box_con {
				font-size: 28rpx;
				line-height: 46rpx;
				color: #8a8c8d;
				margin-top: 36rpx;
				.con_box_con_item {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-bottom: 24rpx;
					line-height: 46rpx;
					color: #8a8c8d;
				}
				.totle {
					font-size: 28rpx;
					font-weight: 500;
					color: #66645d;
					line-height: 40rpx;
				}
				.chatList_img {
					margin-bottom: 24rpx;
					image {
						width: 154rpx;
						height: 154rpx;
						margin-right: 12rpx;
						margin-bottom: 12rpx;
						&:nth-child(3n) {
							margin-right: 0rpx;
						}
					}
					.uni-auto-image {
						margin-right: 12rpx;
						margin-bottom: 12rpx;
						&:nth-child(3n) {
							margin-right: 0rpx;
						}
					}
					margin-top: 24rpx;
				}
				.handle {
					display: flex;
					align-items: center;
					margin-top: 0;
					.icon_list {
						display: flex;
						align-items: center;
						.icon {
							width: 30rpx;
							height: 30rpx;
							margin-right: 8rpx;
							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
				.hf {
					.explin {
						background: #f7f7f7;
						color: #66645d;
						line-height: 40rpx;
						border-radius: 12rpx;
						padding: 10rpx 24rpx;
						margin: 24rpx 24rpx 8rpx 0;
						.fh_message {
							position: relative;
							.chatList {
								// display: flex;
								margin-left: 0rpx;
							}
						}
					}
				}
			}
		}
	}
	.wrap {
		// position: relative;
		width: 100%;
		.chat {
			width: 680rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 40rpx;
			.textarea {
				border: 2rpx solid rgba(151, 151, 151, 0.4);
				text-align: left;
				padding: 20rpx;
				margin-bottom: 40rpx;
				height: 400rpx;
				width: 100%%;
				color: #8a8c8d;
				font-weight: 300;
				border-radius: 12rpx;
				.uni-textarea {
					width: calc(100% - 40rpx);
					height: calc(100% - 40rpx);
					line-height: 46rpx;
					font-size: 28rpx;
					font-weight: 300;
					color: #66645d;
				}
			}
			.button_userkeeper_bottom {
				// margin-top: 60rpx;
				.baseBtn {
					border-radius: 12rpx;
					background: #facc6b;
					color: #66645d;
					font-size: 30rpx;
					margin: 0 40rpx;
					height: 82rpx;
					margin-top: 30rpx;
					line-height: 82rpx;
				}
			}
		}

		.share {
			width: 90%;
			position: relative;
			top: 10%;
			margin-left: 5%;
			background: #fff;
			border-radius: 12rpx;
			height: 85%;
			.title {
				font-size: 36rpx;
				padding: 36rpx 160rpx;
				color: #66645d;
				display: flex;
				justify-content: center;
			}
			.data {
				text-align: left;
				.month {
					font-size: 62rpx;
					color: #66645d;
				}
				.year {
					font-size: 28rpx;
					color: #66645d;
				}
			}
			.compony {
				font-size: 30rpx;
				color: #f29700;
			}
			.small_title {
				position: relative;
				margin-bottom: 94rpx;
				.small_title_cont:before,
				.small_title_cont:after {
					content: '';
					position: absolute;
					display: block;
					bottom: 10rpx;
					-webkit-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
					border-top: 2rpx solid #c7c7c7;
					width: 100rpx;
					height: 2rpx;
				}
				.small_title_cont:before {
					left: 34%;
				}
				.small_title_cont:after {
					right: 20%;
				}
			}
			.btn {
				display: flex;
				align-items: center;
				position: absolute;
				left: 0rpx;
				bottom: 0rpx;
				width: 100%;
				button {
					width: 100%;
					color: #66645d;
					font-size: 30rpx;
					height: 90rpx;
					border-radius: 0rpx;
					line-height: 90rpx;
				}
			}
		}
	}
}

.mask {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.2);
}
.actionsheet {
	position: fixed;
	left: 0;
	bottom: 0;
	transform: translateY(100%);
	backface-visibility: hidden;
	z-index: 999;
	width: 100%;
	visibility: hidden;
	transition: transform 0.3s, visibility 0.3s;
	padding: 24rpx 28rpx;
	text-align: center;
	&.actionsheet_toggle {
		visibility: visible;
		transform: translate(0);
	}
	.actionsheet__menu {
	}
	.actionsheet__action {
		margin-top: 24rpx;
	}
	.actionsheet__cell {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 0;
		height: 100rpx;
		line-height: 100rpx;
	}
}

.place-holder {
	font-size: 28rpx;
	font-family: PingFangSC-Light, PingFang SC;
	font-weight: 300;
	color: #8a8c8d;
	line-height: 46rpx;
}
.sort {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #66645d;
}
</style>
